/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/



import React, { useEffect, useState } from 'react'

import { connect } from 'dva';

import styles from './index.less';


const BaseInfoDetail: React.FC<any> = (props) => {
    const { info, abilityModel: { publishDetail } } = props
    console.log("🚀 ~ file: index.tsx ~ line 34 ~ props", props)
    const [carList, setCarList] = useState({})
    useEffect(() => {
        setCarList(publishDetail.data.allCarModelMap)
    }, []);

    const getCarName = (seriesCode: string, modelCode: string) => {
        if (seriesCode && modelCode) {
            return carList?.[seriesCode]?.label + ' / ' + carList?.[seriesCode]?.models[modelCode]?.modelName
        }
    };
    return (
        <div className={`${styles.basic}`}>
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>能力名称：</div>
                <div className={`${styles.basicItemMain}`}>{info?.name}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>能力ID：</div>
                <div className={`${styles.basicItemMain}`}>{info?.skillId}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>适用车型：</div>
                <div className={`${styles.basicItemMain}`}>{getCarName(info?.seriesCode, info?.modelCode)}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>服务矩阵版本号：</div>
                <div className={`${styles.basicItemMain}`}>{info?.socVersion}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>能力类型：</div>
                <div className={`${styles.basicItemMain}`}>{info?.type}</div>
            </div>
            {/* <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>角色:</div>
                <div className={`${styles.basicItemMain}`}>{info?.role}</div>
            </div> */}
            <div className={`${styles.basicLine} flex-row-mid`}>
                <div className={`${styles.basicItemTitle}`}>分类：</div>
                <div className={`${styles.basicItemMain}`}>{info?.category}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                {/* 需求文档v2.0新增字段 */}
                <div className={`${styles.basicItemTitle}`}>配置字：</div>
                <div className={`${styles.basicItemMain}`}>{info?.property}</div>
            </div>
            <div className={`${styles.basicLine} flex-row-mid`}>
                  {/* 需求文档v2.0变更字段文本 */}
                <div className={`${styles.basicItemTitle}`}>文字模板：</div> 
                <div className={`${styles.basicItemMain}`}>{info?.description}</div>
            </div>
        </div>
    )
}

export default connect(({ abilityModel, loading }: { abilityModel: any; loading: any }) => ({
    abilityModel,
    loading: loading.models.abilityModel,
}))(BaseInfoDetail);